import { Button, Modal, Form, Input, Row, Select, Col, DatePicker, Space,Table } from 'antd';
import React, { useState, useEffect,useCallback } from 'react';
import { useMemo } from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom'

const ItemFrom = function (props) {
  const { visible, setVisible, rowInfo = {}, getChildrenValue, heardtitle,classlist=[] } = props
  const [form] = Form.useForm();
  //点击提交按钮
  const onFinish = (values) => {
    setVisible(false);
    getChildrenValue(values, rowInfo._id)
  };
  //点击取消按钮
  const handleCancel = () => {
    setVisible(false);
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  useEffect(() => {
    form.setFieldsValue({
      name: rowInfo.name,
      code: rowInfo.code
    })
  }, [rowInfo]);

  const columns = [
    {
      title: '分校城市',
      dataIndex: 'city',
      key: 'city',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '班级名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '学科',
      dataIndex: 'category',
      key: 'category',
    },
    {
      title: '创建时间',
      key: 'add_time',
      dataIndex: 'add_time',
    }
  ];
  const [total, setTotal] = useState(0)
  const [search, setSearch] = useSearchParams(); 
  const [params, setParams] = useState({
    page: search.get('page') * 1 || 1,
    size: search.get('size') * 1 || 10
  })
  //各个校区的班级列表
  const [datalist,setdatalist] = useState([])
  const getdata =useCallback(()=>{
    setdatalist(classlist.filter(item=>item.city==rowInfo.name))
    //console.log('rowInfo.name',rowInfo.name)
  },[rowInfo.name]) 
  useEffect(() => {
    getdata()
}, [rowInfo.name])

  return (
    <Modal
      getContainer={false}
      title={Array.isArray(heardtitle)?heardtitle[1]+'分校':heardtitle +'分校'}
      visible={visible}
      footer={null}
      onCancel={handleCancel}
    >
      {
        heardtitle==='详情'?
        <Table rowKey='_id' columns={columns} dataSource={datalist}/>
        : 
        <Form
        form={form}//与表格连接起关系，不然form.setFieldsValue会不起作用
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        initialValues={{
          name: rowInfo.name,
          code: rowInfo.code,
        }}
      >
        <Form.Item
          name="name"
          label="分校城市"
          rules={[
            {
              required: true,
              message: '请输入新增分校所在的城市'
            },
          ]}
        >
          <Input/>
        </Form.Item>
        <Form.Item
          name="code"
          label="分校代号"
          rules={[
            {
              required: true,
              message: '请输入分校代号',
            },
          ]}
        >
          <Input/>
        </Form.Item>
        <Row gutter={16} style={{ textAlign: 'right' }} >
          <Col span={24} >
            <Button htmlType="submit" type="primary" style={{ marginRight: '8px', width: '80px', height: '35px' }}> 提交</Button>
            <Button onClick={handleCancel} style={{ marginRight: '15px', width: '80px', height: '35px' }}>取消</Button>
          </Col>
        </Row>
        </Form>
      }
      
    </Modal>
  )
}
export default ItemFrom;